<template>
  <div class="form-box">
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-width="115px"
    >
      <el-form-item label="选择参与的用户" prop="userRange">
        <el-select
          v-model="ruleForm.userRange"
          placeholder="请您选择参与的用户"
          clearable
          style="width:35%"
          :disabled="activityInfo.activityStatus === 'ONGOING'"
        >
          <el-option
            v-for="item in userRangeList"
            :key="item.dictValue"
            :label="item.dictLabel"
            :value="item.dictValue"
          >
          </el-option>
        </el-select>
        <el-button
          style="margin:0 0 25px 15px"
          type="success"
          icon="el-icon-plus"
          v-show="ruleForm.userRange === 'ORIENTEERING_USER'"
          @click="handelGroup"
        >
          选择用户分组
        </el-button>
        <div v-show="ruleForm.userRange === 'ORIENTEERING_USER'">
          <span style="font-weight: 600;font-size:16px">用户分组</span>
          <el-table :data="tableData" style="width: 47%">
            <el-table-column label="用户分组名称" prop="name" align="center">
            </el-table-column>
            <el-table-column label="操作" align="center">
              <el-button
                type="text"
                @click="deleteGroup"
                :disabled="activityInfo.activityStatus === 'ONGOING'"
                >删除</el-button
              >
            </el-table-column>
          </el-table>
        </div>
      </el-form-item>
    </el-form>
    <div class="handlerButton">
      <el-button type="success" @click="handelTab('customConfig')">
        上一步
      </el-button>
      <el-button type="info" @click="cancel">取 消</el-button>
      <el-button type="success" @click="submitConfig">
        保存
      </el-button>
    </div>
    <groupDialog
      v-if="dialogData.isShow"
      :dialog-data="dialogData"
      @groupData="groupData"
    ></groupDialog>
  </div>
</template>

<script>
import groupDialog from './groupDialog'
import { groupDetail } from '@/api/activityCenter/activityManage/common'
import { sysNormalDisable } from '@utils/dictionariesFunc'
export default {
  props: ['routeName', 'activityInfo'],
  components: { groupDialog },
  data() {
    return {
      tableData: [],
      ruleForm: { userRange: '', orienteeringUserGroup: [] },
      dialogData: { isShow: false },
      userRangeList: [],
      rules: {
        userRange: [
          { required: true, message: '请选择参与的用户', trigger: 'change' }
        ]
      }
    }
  },
  watch: {
    activityInfo: {
      handler(val) {
        const obj = {
          userRange: val.userRange,
          orienteeringUserGroup: val.orienteeringUserGroup || []
        }
        this.$set(this.$data, 'ruleForm', obj)
        if (obj.orienteeringUserGroup.length) {
          const { orienteeringUserGroup } = val
          groupDetail(orienteeringUserGroup, {}, (res) => {
            this.tableData = res
          })
        }
      }
    }
  },
  async mounted() {
    this.userRangeList = await sysNormalDisable('user_rang', 'user_rang')
  },
  methods: {
    /* 上一步 */
    handelTab(name) {
      this.$emit('handleClick', { name })
    },
    /* 取消 */
    cancel() {
      this.$router.push({ name: this.routeName })
    },
    /* 选择分组 */
    handelGroup() {
      this.dialogData.isShow = true
    },
    groupData(val) {
      this.tableData.splice(0, 1, val)
      this.ruleForm.orienteeringUserGroup.splice(0, 1, val.id)
    },
    /* 删除分组 */
    deleteGroup() {
      this.tableData = []
    },
    /* 数据 */
    collectData() {
      let obj = Object.assign({}, this.ruleForm)
      const { userRange } = obj
      if (userRange !== 'ORIENTEERING_USER') {
        delete obj.orienteeringUserGroup
      }
      if (!this.tableData.length && userRange === 'ORIENTEERING_USER') {
        this.$message.warning('请选择用户分组')
        obj = { tab: 'userRules' }
      }
      this.$refs['ruleForm'].validate((valid) => {
        if (!valid) obj = { tab: 'userRules' }
      })
      return obj
    },
    /* 提交 */
    submitConfig() {
      this.$emit('submitConfig')
    }
  }
}
</script>

<style lang="less" scoped>
.handlerButton {
  width: 300px;
  margin: 0 auto;
  .el-button {
    margin-right: 30px;
  }
}
</style>
